<template>
	<view>
		<!-- 地图显示 -->
		<view class="bottom_box" v-show="showRoute">
			<Driving :longitude="originLng" :latitude="originLat" :data="drivingData" :markers="markers"></Driving>
		</view>

		<view class="typeInformation">
			<!-- 公里数 -->
			<view class="time_km">
				<view class="time_km_item1">
					<span style="margin-right: 10px;">预计</span>
					<text style="color: cornflowerblue;" v-if="duration < 3600">{{ Math.ceil(duration / 60) }}分钟</text>
					<text v-else>{{ Math.floor(duration / 3600) }}小时{{ Math.ceil(duration % 3600 / 60) }}分钟</text>
				</view>
				<view class="time_km_item2">
					<span style="margin-right: 10px;">大约</span>
					<text v-if="distance < 1000">{{ distance }}米</text>
					<text v-else>{{ (distance / 1000).toFixed(1) }}公里</text>
				</view>
			</view>

			<!--打车类型-->
			<view class="vehicle-option">
				<radio-group v-model="selectedOption">
					<view class="vehicle-info" v-for="option in vehicleOptions" :key="option.id">
						<u-avatar :src="option.avatar" mode="circle"></u-avatar>
						<view class="info-container">
							<view class="vehicle-details">
								<span class="vehicle-type">{{ option.type }}</span>
								<div class="tag-container">
									<u-tag v-for="(tag, index) in option.tags" :key="index" :text="tag.text"
										:type="tag.type" />
								</div>
							</view>
							<view class="vehicle-price-info">
								<span class="estimate-price">预估{{ option.price }}元</span>
								<span class="discount">优惠券已减{{ option.discount }}元</span>
							</view>
						</view>
						<!-- 绑定单选框 -->
						<radio :value="option.id"></radio>
					</view>
				</radio-group>
			</view>
			<u-button type="primary" shape="circle" class="call-car-btn">立即叫车</u-button>
		</view>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	import {
		key
	} from '../../common/map-key.js';
	import '@/static/iconfont/iconfont.css';
	import Driving from '../route_driving/route_driving.vue';

	export default {
		components: {
			Driving
		},
		data() {
			return {
				amapPlugin: null,
				origin: '',
				markers: [],
				originLng: '',
				originLat: '',
				destination: '',
				destinationLng: '',
				destinationLat: '',
				drivingData: {},
				showRoute: false,
				distance: 0,
				originInfo: [],
				duration: 0,
				vehicleOptions: [{
						id: '1',
						type: '拼车',
						avatar: require('@/static/images/sf90.png'),
						tags: [{
								text: '隐私保护',
								type: 'success'
							},
							{
								text: '测温消毒',
								type: 'success'
							}
						],
						price: 18,
						discount: 8
					},
					{
						id: '2',
						type: '专车',
						avatar: require('@/static/images/lbjn.png'),
						tags: [{
								text: '隐私保护',
								type: 'success'
							},
							{
								text: '测温消毒',
								type: 'success'
							}
						],
						price: 18,
						discount: 8
					}
				],
				selectedOption: ''
			};
		},

		created() {
			this.amapPlugin = new amap.AMapWX({
				key
			});
			if (this.amapPlugin) {
				console.log('AMapWX插件加载成功');
				this.useDriving();
			} else {
				console.log('AMapWX插件加载失败');
			}
		},

		methods: {
			//获取地图定位和路线规划
			useDriving() {
				this.showRoute = true;
				this.drivingData = {};
				this.markers = [];
				const selectedOrginAddress = uni.getStorageSync('selected_orginAddress');
				if (selectedOrginAddress) {
					this.originInfo = selectedOrginAddress;
				} else {
					this.originInfo = uni.getStorageSync('originInfo');
				}
				const destinationData = uni.getStorageSync('selected_endAddress');
				if (this.originInfo && destinationData) {
					this.origin = this.originInfo.name;
					this.originLng = this.originInfo.longitude;
					this.originLat = this.originInfo.latitude;
					this.destinationLat = destinationData.latitude;
					this.destinationLng = destinationData.longitude;
					this.destination = destinationData.name;

					uni.showLoading({
						title: '获取路线中'
					});

					this.amapPlugin.getDrivingRoute({
						origin: `${this.originLng},${this.originLat}`,
						destination: `${this.destinationLng},${this.destinationLat}`,
						success: (data) => {
							console.log('驾车路线:', data);
							this.drivingData = data;

							if (data.paths && data.paths[0]) {
								this.distance = Number(data.paths[0].distance);
								this.duration = Number(data.paths[0].duration);
							}

							this.markers = [{
									id: 1,
									latitude: this.originLat,
									longitude: this.originLng,
									width: 20,
									height: 30,
									label: {
										content: this.origin,
										color: '#000000'
									},
									iconPath: '../../static/marker/mapicon_navi_s.png'
								},
								{
									id: 2,
									latitude: this.destinationLat,
									longitude: this.destinationLng,
									width: 20,
									height: 30,
									label: {
										content: this.destination,
										color: '#000000'
									},
									iconPath: '../../static/marker/mapicon_navi_e.png'
								}
							];

							this.showRoute = true;
							uni.hideLoading();
						},
						fail: (info) => {
							console.log('路线规划失败', info);
							uni.hideLoading();
						}
					});
				} else {
					console.log('缺少起点或终点数据');
				}
			},
		}
	};
</script>

<style scoped>
	.bottom_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		/* 确保覆盖其他内容 */
		overflow-y: auto;
		/* 如果内容溢出，可以滚动 */
		background-color: #fff;
		/* 可选：设置背景色 */

	}

	/* 非继承路线规划 */
	.time_km {
		width: auto;
		height: 12vh;
		background-color: #ffffff;
	}

	.time_km_item1,
	.time_km_item2 {
		margin-top: 20rpx;
		text-align: center;
	}

	.time_km_item1 {
		font-size: 32rpx;
		font-weight: bold;
	}


	/* 底部面板 */
	.typeInformation {
		height: auto;
		/* 自动高度，根据内容调整 */
		padding: 20rpx;
		border-radius: 10rpx 10rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #efefef;
		z-index: 1000;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.vehicle-option {
		display: flex;
		flex-direction: column;
		/* 将车辆选项垂直布局 */
	}

	.vehicle-info {
		display: flex;
		align-items: center;
		/* 将头像和单选框与其他元素对齐 */
		background-color: #fff;
		padding: 10rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 10rpx;
		/* 添加底部间距，增加分隔效果 */
	}

	.info-container {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
	}

	.vehicle-details {
		flex-grow: 1;
		margin-left: 10px;
		margin-top: 10px;
		/* 让详情信息占据剩余空间 */
	}

	.vehicle-type {
		font-weight: bold;
		margin-bottom: 5rpx;
	}

	.tag-container {
		display: flex;
	}

	.tag-container u-tag {
		margin-right: 5rpx;
	}

	.vehicle-price-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: -20px;
		/* margin-bottom: 10px; */
	}

	.call-car-btn {
		width: 100%;
	}

	.estimate-price {
		font-size: 15px;
		margin-right: 28px;
		font-weight: bold;
		margin-bottom: 25rpx;
	}

	.discount {
		color: #888;
	}
</style>